<template>
  <div class="bg">
    <!-- 顶部标题 -->
    <div class="top">
      <p class="top-text">人工充值</p>
    </div>
    <!-- 主体内容 -->
    <div class="center">
      <div class="aaaa">
        <div class="interval">
          <span class="tops">请选择收款人：</span>
          <el-select v-model="selects" clearable placeholder="请选择订单状态">
            <el-option
              v-for="item in option"
              :key="item.id"
              :label="item.merchant_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="input">
        <el-input placeholder="请输入充值金额" v-model="recharge_amount">
          <template slot="prepend">金额</template>
        </el-input>
      </div>
      <div class="button">
        <el-button type="success" @click="asdad(selects),dialogVisible = true"
          >确认充值</el-button
        >
        <el-button type="danger" @click="recharge_amount = ''"
          >重新填写</el-button
        >
      </div>
    </div>

    <!-- 查看弹窗 -->
    <el-dialog title="请理性充值" :visible.sync="dialogVisible" width="30%">
      <div class="popup">
        <div class="top">
          <p class="top-text">单位(元)</p>
        </div>
            <el-input placeholder="暂无" readonly v-model="aaa">
          <template slot="prepend">&emsp;收款人:</template>
        </el-input>
        <el-input placeholder="暂无" readonly v-model="recharge_amount">
          <template slot="prepend">充值金额:</template>
        </el-input>

        <div class="top">
          <p class="top-text">请选择支付方式</p>
        </div>
        <el-radio-group v-model="radio1">
          <el-radio-button label="支付宝"></el-radio-button>
          <el-radio-button label="微信"></el-radio-button>
          <el-radio-button label="银行卡"></el-radio-button>
          <el-radio-button label="云闪付"></el-radio-button>
          <el-radio-button label="扫码"></el-radio-button>
          <el-radio-button label="新增银行卡"></el-radio-button>
        </el-radio-group>

        <div class="popup-button">
          <el-button type="success" @click="recharge(), (dialogVisible = false)"
            >确认充值</el-button
          >
          <el-button type="primary" @click="dialogVisible = false"
            >取消充值</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recharge_amount: "",
      dialogVisible: false,
      radio1: "支付宝",
      option: [],
      selects:'',
      aaa:'',
    };
  },
  methods: {
    open1(a) {
      this.$message({
        message: a,
        type: "success",
      });
    },
    recharge() {
      this.$axios({
        url: "/addRechargeAmount",
        method: "GET",
        params: {
          alternations_amount: this.recharge_amount,
          user_account_id:this.selects,
        },
      })
        .then((response) => {
          console.log(response);
          if (response.data.code == "200") {
            this.open1("充值成功 " + " 充值金额：" + this.recharge_amount);
          } else {
            this.$message.error("充值请求出错，请联系管理员");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("充值请求出错，请联系管理员");
        });
    },
    asdad(val){
      for(let i = 0 ; i < this.option.length; i ++){
        if( this.option[i].id == val){
          this.aaa = this.option[i].merchant_name
        }
      }

    }
  },
  mounted() {
    this.$axios({
      url: "/searchMerchantRecharge",
      method: "GET",
    })
      .then((response) => {
        this.option = response.data.data
      })
      .catch((error) => {
        console.log("id", error);
      });
  },
};
</script>

<style lang="scss" scoped>
template {
  padding: 15px;
}
// 顶部标题
.bg {
  background-color: white;
}
.top {
  padding: 15px;
  border-bottom: 2px solid #f6f6f6;
}
.top-text {
  font-size: 14px;
}
.input {
  padding: 20px 7.5px;
  width: 305px;
}
.button {
  padding: 20px 7.5px;
}
// 弹窗
.popup-button {
  padding: 35px 0 0 0;
  display: flex;
  justify-content: center;
  .el-button {
    margin: 0 55px;
  }
}
.aaaa {
  position: relative;
  height: 40px;
}
.tops {
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #f5f7fa;
  color: #909399;
  height: 40px;
  width: 100px;
  line-height: 40px;
  position: absolute;
  top: 0;
  left: 7.5px;
  font-size: 13.5px;
}
.interval{
margin-left: 107px;
margin-top: 20px;
}
</style>